<template>
  <div v-if="model&&model.modelKey=='searchBox'" :key="model.modelKey" class="model_box search-box">
    <div class="searchbox_inner flex fbt alc" :style="`border-color:${model.color};`">
      <div class="left flex alc">
        <i class="el-icon-search"></i>
        <div class="placeholder" :style="`color:${model.txtColor};`">
          搜索游戏名称或商品编号
        </div>
      </div>
      <div class="txt" :style="`background:${model.btnBgcolor}`">
        搜索
      </div>
    </div>
    <zhezhao @clickSet="clickItem('set')" :hidetxt="true"></zhezhao>
  </div>
</template>

<script>
import zhezhao from '../zhezhao.vue';
export default {
  components:{zhezhao},
  props: {
    model: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    clickItem(type) {
      this.$emit('clickItem', {type: type, modelKey: this.model.modelKey})
    }
  }
};
</script>
<style lang="scss" scoped>
    .search-box {
      .searchbox_inner {
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #ff5c02;
        height: 34px;
        padding: 0 10px;
      }

      .placeholder {
        line-height: 34px;
        color: #666;
        margin-left: 5px;
      }

      .txt {
        width: 44px;
        height: 24px;
        line-height: 24px;
        background: linear-gradient(179deg, #ffd28d 0%, #ffa132 100%);
        border-radius: 4px;
        text-align: center;
        color: #fff;
      }
    }
</style>